<template>
    <div class='roles'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>角色管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
            border
            :data="rolesList"
            style="width: 100%">
            <el-table-column
            type="index"
            :index="indexMethod">
            </el-table-column>
            <el-table-column
            prop="authName"
            label="权限"
            width="180">
            </el-table-column>
            <el-table-column
            prop="path"
            label="路径"
            width="180">
            </el-table-column>
             <el-table-column label="层级"  width="80">
                <template slot-scope="scope">
                    <span>{{scope.row.level | levelFormat}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getRightsList } from '@/api/login.js'
export default {
  data () {
    return {
      rolesList: []
    }
  },
  // 在el-table中：过渡器只能在插值表达式中使用
  filters: {
    levelFormat (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      }
    }
  },
  methods: {
    getList () {
      getRightsList({type: 'list', pagesize: this.pagesize, pagenum: this.pagenum})
        .then(res => {
          console.log(res)
          if (res.meta.status === 200) {
            this.rolesList = res.data
            this.total = res.data.length
            this.pagenum = Math.ceil((this.total) / 10)
          }
        })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>

</style>
